<template>
    <div>
        <!-- 搜索框 -->
        <van-search
            v-model="searchVal"
            disable
            placeholder="请输入搜索关键词"
            @click="$router.push('/category/searchPopup')"
        />
        <!-- 主体内容区 -->
        <div class="content">
            <!-- 左侧sidebar -->
            <van-sidebar v-model="activeKey">
                <van-sidebar-item
                    v-for="item in categoryList"
                    :key="item.id"
                    :title="item.name"
                    @click="sidebarClick(item.id)"
                />
            </van-sidebar>
            <!-- 右侧内容 -->
            <div class="right">
                <div class="banner">
                    <img :src="currentCategory.banner_url" alt="" />
                    <span>{{ currentCategory.front_name }}</span>
                </div>
                <div class="mytitle">
                    <span></span>
                    <h3>餐厨分类</h3>
                </div>
                <van-grid :column-num="3">
                    <van-grid-item
                        v-for="item in subCategoryList"
                        :key="item.id"
                        :icon="item.wap_banner_url"
                        :text="item.name"
                    />
                </van-grid>
            </div>
        </div>
        <transition name="van-slide-right">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import { GetCateGoryLists, GetCurrentCateGory } from "@/request/api";
export default {
    data() {
        return {
            searchVal: "",
            activeKey: 0,
            categoryList: [], //左侧数据
            currentCategory: [], //右侧数据
            subCategoryList: [], //右侧数据的子数据
        };
    },
    created() {
        //获取分类的数据
        GetCateGoryLists().then((res) => {
            if (res.data.errno == 0) {
                // console.log(res);
                let { categoryList } = res.data.data;
                this.categoryList = categoryList;
            }
        });
        this.getData(1005000);
    },

    methods: {
        //左侧点击获取到的当前id
        sidebarClick(val) {
            console.log(val);
            this.getData(val);
        },
        //封装的右侧数据请求
        async getData(id) {
            let res = await GetCurrentCateGory({ id });
            console.log(res);
            this.currentCategory = res.data.data.currentCategory;
            this.subCategoryList =
                res.data.data.currentCategory.subCategoryList;
        },
    },
};
</script>
 
<style lang = "less" scoped>
.content {
    display: flex;
    .van-sidebar {
        width: 20%;
        height: calc(100vh - 104px);
        background: #f7f8fa;
    }
    .right {
        width: 80%;
        background-color: #fff;
    }
    .banner {
        width: 95%;
        margin: 0 auto;
        position: relative;
        img {
            width: 100%;
            height: 140px;
            display: block;
            border-radius: 5px;
            box-shadow: 0 0 6px #000;
            -webkit-filter: brightness(0.5);
            filter: brightness(0.5);
        }
        span {
            position: absolute;
            left: 0;
            top: 0;
            color: #fff;
            width: 100%;
            text-align: center;
            line-height: 140px;
        }
    }
    .mytitle {
        background: #fff;
        height: 50px;
        line-height: 50px;
        position: relative;
        span {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 2px;
            width: 50%;
            background: #ccc;
        }
        h3 {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 30%;
            background: #fff;
            text-align: center;
        }
    }
}
</style>